<template>
  <div class="common-body-page report-detail-page">
    <header class="main-header">
        <div>
          <!-- 标题 -->
          <div class="title">
            <router-link to='/' tag="p">{{$I18n.dashBoard}}<span>/</span></router-link>
            <router-link to='/vpsList' tag="p">{{$I18n.vps}}<span>/</span></router-link>
            <p class="black">{{$I18n.vpsInfo}}</p>
          </div>
          <!-- 按钮 -->
          <div>
            <button class="btn" @click="saveVps" v-if="!isEdit">{{$I18n.save}}</button>
            <button class="btn" @click="isEdit=false" v-else>{{$I18n.edit}}</button>
            <button class="cancel-btn" @click="cancelDialog=true">{{$I18n.cancel}}</button>
          </div>
        </div>
    </header>
    <section class="gc-body">
      <h3 class="title">{{$I18n.vpsInfo}}</h3>
        <div class="body">
        <!-- 出险人信息 -->
        <div class="self-tab">{{$I18n.baseInfo}}</div>
        <el-form>
                  <!-- 站点 -->
          <el-form-item :label="$I18n.site" required :class="{'no-line': isEdit}">
            <el-select v-model="vpsData.site" :readonly="isEdit">
              <el-option v-for="item in siteList" :key="item.codeKey" :label="item.codeName" :value="item.codeKey"></el-option>
            </el-select>
          </el-form-item>
              <!-- 留评日期 -->
          <el-form-item  :label="$I18n.startDate" required :class="{'no-line': isEdit}">
            <el-date-picker class="el-gclife-date" :readonly="isEdit" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="vpsData.startDate"   type="date" placeholder="开始日期"></el-date-picker>
          </el-form-item>
              <!-- 留评日期 -->
          <el-form-item  :label="$I18n.endDate" required :class="{'no-line': isEdit}">
            <el-date-picker class="el-gclife-date" :readonly="isEdit" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="vpsData.endDate"   type="date" placeholder="到期日期"></el-date-picker>
          </el-form-item>
          <!-- 渠道 -->
          <el-form-item :label="$I18n.price" :class="{'no-line': isEdit}" required>
            <el-input v-model="vpsData.price" :readonly="isEdit"></el-input>
          </el-form-item>
          <el-form-item :label="$I18n.month" :class="{'no-line': isEdit}" required>
            <el-input v-model="vpsData.month" :readonly="isEdit"></el-input>
          </el-form-item>
           <el-form-item :label="$I18n.year" :class="{'no-line': isEdit}" required>
            <el-input v-model="vpsData.year" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 渠道 -->
          <el-form-item :label="$I18n.channel" :class="{'no-line': isEdit}" required>
            <el-input v-model="vpsData.channel" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 渠道网址 -->
          <el-form-item  :label="$I18n.channelUrl" required :class="{'no-line': isEdit}">
            <el-input v-model="vpsData.channelUrl" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 渠道用户 -->
          <el-form-item  :label="$I18n.channelUser" required :class="{'no-line': isEdit}">
            <el-input v-model="vpsData.channelUser" :readonly="isEdit"></el-input>
          </el-form-item>
             <!-- IP -->
          <el-form-item  :label="$I18n.vpsIp" required :class="{'no-line': isEdit}">
            <el-input v-model="vpsData.vpsIp" :readonly="isEdit"></el-input>
          </el-form-item>
           <!-- vps名称 -->
          <el-form-item  :label="$I18n.vpsName"  :class="{'no-line': isEdit}">
            <el-input v-model="vpsData.vpsName" :readonly="isEdit"></el-input>
          </el-form-item>
           <!-- vps名称 -->
          <el-form-item  :label="$I18n.sshUser"  :class="{'no-line': isEdit}">
            <el-input v-model="vpsData.sshUser" :readonly="isEdit"></el-input>
          </el-form-item>
           <!-- vps名称 -->
          <el-form-item  :label="$I18n.sshPassword"  :class="{'no-line': isEdit}">
            <el-input v-model="vpsData.sshPassword" :readonly="isEdit"></el-input>
          </el-form-item>
                 <!-- 状态 -->
          <el-form-item :label="$I18n.vpsStatus" required :class="{'no-line': isEdit}">
            <el-select v-model="vpsData.vpsStatus" :readonly="isEdit">
              <el-option v-for="item in statusList" :key="item.codeKey" :label="item.codeName" :value="item.codeKey"></el-option>
            </el-select>
          </el-form-item>
           <!-- vps名称 -->
          <el-form-item  :label="$I18n.vpsConfig" class="row" :class="{'no-line': isEdit}">
            <el-input type="textarea"  rows="10" v-model="vpsData.vpsConfig" :readonly="isEdit"></el-input>
          </el-form-item>
   
        </el-form>
      </div>
    </section>
    <!-- 取消弹框 -->
    <el-dialog :title="$I18n.hint" :visible.sync="cancelDialog" custom-class="hit-dialog">
      <p class="text">{{$I18n.confirmBack}}</p>
      <div slot="footer" class="dialog-footer">
        <button class="btn" @click="$router.push('/vpsList')">{{$I18n.ok}}</button>
        <button class="cancel-btn" @click="cancelDialog=false">{{$I18n.cancel}}</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import INTERFACE from './interface'

export default {
  data() {
    return {
      vpsId: this.$route.query.vpsId,
      cancelDialog: false,
      vpsData: {},
      isEdit: false,
      statusList: [
        {codeKey: 'NEW', codeName: '新开'},
        {codeKey: 'USEING', codeName: '使用中'},
        {codeKey: 'DISABLE', codeName: '废弃'}
      ],
      siteList: [
        {codeKey: 'US', codeName: '美国'},
        {codeKey: 'JP', codeName: '日本'},
        {codeKey: 'FR', codeName: '法国'},
        {codeKey: 'CA', codeName: '加拿大'},
        {codeKey: 'UK', codeName: '英国'},
        {codeKey: 'IT', codeName: '意大利'},
        {codeKey: 'DE', codeName: '德国'},
        {codeKey: 'AU', codeName: '澳大利亚'},
        {codeKey: 'ES', codeName: '西班牙'},
        {codeKey: 'KR', codeName: '韩国'},
      ],
    }
  },
  created() {
    if (!this.vpsId) return
    this.isEdit = true
    INTERFACE.queryVpsDetail({vpsId: this.vpsId}).then(res => {
      this.vpsData = res.data
    })
  },
  methods: {
    saveVps() {
      this.vpsData.vpsId = this.vpsId;
      INTERFACE.saveVps(this.vpsData).then(res => {
        if (res.error !== 'SUCCESS') return
        window.Tips(res.message)
        this.$router.push('/vpsList')
      })
    }
  }
}
</script>